<template>
  <div class="app-container" style="position: relative" v-loading="loading">
    <el-form ref="eventsForms" label-position="left" label-width="100px" :model="eventsForms" size="small">
<div class="switch_classification">
  <div :class="accve == index ? 'bind' : 'ahide'" v-for="(item,index) in screntlist" :key="index" @click="regswitch(index)">
    {{item}}
  </div>
</div>
<div v-if="accve == 0">
          <div class="blockquote-box">注册配置</div>
          <div class="form-box">
            <el-row :gutter="20">
              <el-col :span="10">
                <el-form-item label="邀请码填写" required class="form-box-item flex-box">
                  <el-radio-group v-model="eventsForms.registerLogin.isMust">
                    <el-radio label="1">必填</el-radio>
                    <el-radio label="2">非必填</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="邀请码展示" required class="form-box-item flex-box">
                    <el-radio-group v-model="eventsForms.registerLogin.inviteCode">
                      <el-radio label="1">展示</el-radio>
                      <el-radio label="2">隐藏</el-radio>
                    </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="10">
                <el-form-item label="登录方式" required class="form-box-item">
                  <el-checkbox-group v-model="eventsForms.registerLogin.loginWay" size="small">
                    <el-checkbox :label="1" name="logintype">手机号+验证码</el-checkbox>
                    <el-checkbox :label="2" name="logintype">手机号+密码</el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </el-col>
              <!-- <el-col :span="10">
                <el-form-item label="注册账户" required class="form-box-item">
                  <el-radio-group value="1">
                    <el-radio label="1">手机号+密码+验证码</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col> -->
            </el-row>
          </div>
          <div class="blockquote-box">默认头像设置</div>
          <div class="form-box">
            <el-form-item label="默认头像" prop="avatar_arr" class="form-box-item">
              <logo-upload :fileList="avatarFile" :show-file-list="true" accept="image/jpeg, image/png"
                @uploadCallback="avatarCallback" />
              <div class="tipbox">仅支持.jpg、.png、.jpeg 格式</div>
            </el-form-item>
          </div>
          <div style="text-align: center">
            <el-button style="width: 100px" type="primary" @click="next_step()">下一步</el-button>
          </div>
          </div>

        <div v-if="accve == 1">
          <div class="blockquote-box">新用户标识变更条件</div>
          <div class="form-box">
            <el-form-item label="老用户门槛" required class="form-box-item">
              <el-checkbox-group v-model="eventsForms.userIdentity.oldUserRule" size="small">
                <el-checkbox :label="1" name="sill">完成实名认证</el-checkbox>
                <el-checkbox :label="2" name="sill">完善个人资料</el-checkbox>
                <el-checkbox :label="3" name="sill">绑定银行卡</el-checkbox>
                <el-checkbox :label="4" name="sill">设置支付密码</el-checkbox>
                <el-checkbox :label="5" name="sill">完成首单现金消费</el-checkbox>
                <el-checkbox :label="6" name="sill">完成首单积分消费</el-checkbox>
                <el-checkbox :label="7" name="sill">参与任意一次活动</el-checkbox>
                <el-checkbox :label="8" name="sill">使用积分转化卡</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="门槛限制" required class="form-box-item">
              <el-radio-group v-model="eventsForms.userIdentity.doorRule" @input="selectrule">
                <el-radio :label="1">启用的任意条件</el-radio>
                <el-radio :label="2">启用的所有条件</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item required label="注册时间" class="form-box-item">
              <el-input placeholder="天数" v-model="eventsForms.userIdentity.newUserRegister"
                style="width: 80px"></el-input>
              天后自动变更为老用户
              <div class="tipbox">
                用户在系统设置的时间内未完成门槛条件，系统也会自动变更用户的新老用户标识
              </div>
            </el-form-item>
          </div>
          <div style="text-align: center;margin-top: 150px;">
            <el-button style="width: 100px" type="primary" @click="gradeSubmitForm('eventsForms')">保存</el-button>
          </div>
        </div>

    </el-form>
  </div>
</template>
<script>
  import LogoUpload from "@/components/FileUpload";
  import {
    saveUserConfig,
    getUserConfig
  } from "@/api/admin/user";
  export default {
    components: {
      LogoUpload,
    },
    data() {
      return {
        accve:0,
        screntlist:['常规配置' ,'新用户标识配置'],
        loading: true,
        eventsForms: {
          registerLogin: {
            inviteCode: 1, //邀请码 1开启 2关闭
            isMust: 1, //是否必填 1必填 2不必填
            loginWay: [1], //登录方式 1手机号验证码 2手机号密码
          },
          defaultSet: {
            userAvatar: "", //用户头像
          },
          userIdentity: {
            doorRule: 1, //门槛规则：1满足以下任一条件 2满足一下全部条件
            oldUserRule: [], //老用户门槛 1=完成实名认证 2=完善个人资料 3=绑定银行卡 4设置支付密码 5完成首单消费
            newUserRegister: 30, //新用户注册多少天后成为老用户 不填默认30天
          },
        },
        avatarFile: [],
      };
    },
    created() {
      this.getDataWay();

    },
    methods: {
      next_step(){
        this.accve = 1
      },
      regswitch(tab) {
        this.accve = tab
      },
      getDataWay() {
        this.loading = true;
        getUserConfig().then((res) => {
          this.loading = false;
          if (res.code !== 200 || res.status !== 1) {
            this.$messages.error(res.msg);
            return;
          }
          let obj = res.data;
          let arr = [];
          obj.defaultSet.userAvatar.split(",").forEach((item) => {
            arr.push({
              url: item,
            });
          });
          this.avatarCallback(arr);
          this.eventsForms.registerLogin.inviteCode =
            obj.registerLogin.inviteCode;
          this.eventsForms.registerLogin.isMust = obj.registerLogin.isMust;
          this.eventsForms.registerLogin.loginWay = obj.registerLogin.loginWay
            .split(",")
            .map(Number);

          this.eventsForms.userIdentity.doorRule = obj.userIdentity.doorRule;
          this.eventsForms.userIdentity.oldUserRule = obj.userIdentity.oldUserRule
            .split(",")
            .map(Number);
          this.eventsForms.userIdentity.newUserRegister =
            obj.userIdentity.newUserRegister;


        });
      },
      // 上传头像调用
      avatarCallback(singleFile) {
        this.avatarFile = singleFile;
        if (singleFile.length !== 0) {
          let arr = [];
          singleFile.forEach((item) => {
            arr.push(item.url);
          });
          this.eventsForms.defaultSet.userAvatar = arr.toString();
        } else {
          this.eventsForms.defaultSet.userAvatar = "";
        }
      },
      selectrule(data) {
        if (data == 2) {
          this.eventsForms.userIdentity.oldUserRule = [1, 2, 3, 4, 5];
        }
      },
      gradeSubmitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.loading = true;
            let objForm = JSON.parse(JSON.stringify(this.eventsForms));
            objForm.registerLogin.loginWay =
              objForm.registerLogin.loginWay.toString();
            objForm.userIdentity.oldUserRule =
              objForm.userIdentity.oldUserRule.toString();
            saveUserConfig({
              param: JSON.stringify(objForm)
            }).then((res) => {
              this.loading = false;
              if (res.code !== 200 || res.status !== 1) {
                this.$messages.error(res.msg);
                return;
              }
              this.$messages.success(res.msg);
              this.getDataWay();
            });
          } else {
            return false;
          }
        });
      },
    },
  };
</script>
<style lang="scss">
  .flex-box {
    .el-form-item__content {
      display: -webkit-box;
    }
  }

  .form-box {
    .form-box-item {
      .el-upload-list--picture-card .el-upload-list__item {
        width: 100px;
        height: 100px;
      }

      .el-upload--picture-card {
        width: 100px;
        height: 100px;
        line-height: 110px;
      }
    }
  }
</style>
<style lang="scss" scoped>
  .app-container {
    .blockquote-box {
      border-left: 6px solid #409eff;
      padding-left: 16px;
      margin: 16px 0;
      height: 36px;
      line-height: 36px;
      background: #fafafa;
      font-size: 14px;
    }

    .form-box {
      margin: 0 20px;

      .form-box-item {
        padding-bottom: 10px;
        padding-right: 20px;
        font-size: 12px;
        color: #4c4c4c;

        .left20 {
          margin-left: 20px;
        }

        .tipbox {
          font-size: 12px;
          color: #bebebe;
          font-weight: 550;
        }
      }
    }
  }
  .switch_classification{
    display: flex;
    width: 200px;
    justify-content: space-between;
    margin-bottom: 26px;
    .bind{
      color: #1684fc;
      line-height: 30px;
      font-size: 14px;
      border-bottom: 2px solid #1684fc;

    }
    .ahide{
      color: #647077;
      line-height: 30px;
      font-size: 14px;
    }
  }
</style>
